import React, {Component} from 'react'

import MyHeader from "../components/myheader"

import { Button,InputItem } from 'antd-mobile'

export default class PhoneChange extends Component {
  constructor (props){
   super(props)
   this.state= {
     step:1,
     title: "修改绑定手机（1/2）",
     phone: ""
   }
}
 componentDidMount(){
  this.autoFocusInst.focus();
 }
 componentDidUpdate(){
  this.autoFocusInst.focus();
 }

 nextstep(){
   this.setState({step:2,title:"修改绑定手机（2/2）"})
 }
 changestate2(){

  return  <div>
  <p>点击按钮后，验证码短信将发到<span className="bgcolor">+919919199191,</span>请在5分钟输入验证码</p>
    
    <InputItem type="phone"
  ref={el => this.autoFocusInst = el}
    placeholder="输入需要绑定的号码"
    onChange={(phone)=>{this.setState({phone})}}
    value={this.state.phone}
>国码(+86)</InputItem>

    <Button type="primary">确认</Button>
    </div>
 }
   render() {
   return <div className="changephone">
      <MyHeader {...this.props}>{this.state.title}</MyHeader>

      <div className="basepage">

      {this.state.step==2 ? this.changestate2()  :       
            (<div>
            <InputItem type="num"
              ref={el => this.autoFocusInst = el}
                placeholder="输入需要绑定的号码"
                onChange={(phone)=>{this.setState({phone})}}
                value={this.state.phone}
            >国码(+86)</InputItem>
            <Button type="primary" onClick={()=>{this.nextstep()}}>下一步</Button>
            </div>)
        }
      </div>
   </div>
   }
}